<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<!--justify-content: space-between;-->
<div style="display: flex;">

<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item" >
        <br>
        <div class="layui-inline" style="margin-left: 20px">
            <label class="layui-form-label">所属标签:</label>
            <div class="layui-input-inline">
                <input type="text" name="labelName" style="width: 500px" id="labelName" readonly class="layui-input" >
            </div>

            <div class="layui-input-inline">
                <input type="hidden" name="labelId" id="labelId"  class="layui-input" >
            </div>

        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 20px">

        <div class="layui-inline">
            <select id="kind" name="kind" lay-filter="selectkind" lay-search>
                <option value="0">请选择模块</option>
            </select>
        </div>

        <div class="layui-inline" >
            <select id="kind2" name="kind2">
                <option value="0">请选择分类</option>
            </select>
        </div>
    </div>

</form>
    <div class="layui-inline" style="margin-right: 100px;margin-top: 73px" >
        <button style="text-align: right" id="search_btn" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>搜 索</button>
    </div>

</div>

<script type="text/html" id="barDemo">
        <a class="layui-btn  layui-btn-xs" lay-event="importCase">导入</a>
</script>
<div style="margin-left: 20px;margin-right: 20px">
    <table class="layui-show" id="singleListTable" lay-filter="singleListTable" style="width: 80%"></table>

</div>

<script type="text/html" id="method">
    {{#if (d.method == '0') { }}
    <span>Post</span>
    {{# }else if(d.method == '1'){ }}
    <span>Get</span>
    {{# }else if(d.method == '2'){ }}
    <span>Put</span>
    {{# }else if(d.method == '3'){ }}
    <span>Delete</span>
    {{# } }}
</script>

<script type="text/html" id="status">
    {{#if (d.status == '0') { }}
    <span>手动添加</span>
    {{# }else if(d.status == '1'){ }}
    <span>自动同步</span>
    {{# }else if(d.status == '2'){ }}
    <span>已执行</span>
    {{# }else if(d.status == '3'){ }}
    <span>已变更</span>
    {{# }else if(d.status == '4'){ }}
    <span>已编辑</span>
    {{# }else if(d.status == '5'){ }}
    <span>响应结果变更</span>
    {{# }else if(d.status == '6'){ }}
    <span>请求参数变更</span>
    {{# }else if(d.status == '7'){ }}
    <span>请求参数，响应结果变更</span>
    {{# } }}
</script>

<script type="text/html" id="runStatus">
    {{#if (d.runStatus == '0') { }}
    <span></span>
    {{# }else if(d.runStatus == '1'){ }}
    <span>通过</span>
    {{# }else if(d.runStatus == '2'){ }}
    <span>失败</span>
    {{# } }}
</script>

<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['element', 'table', 'layer'], function () {
        var $ = layui.jquery,
            element = layui.element,
            layer = layui.layer,
            form = layui.form,
            table = layui.table;

            table.render({
                elem: "#singleListTable",
                url: '/va/singleCaseList?kind='+ $("#kind").val()+'&kind2='+ $("#kind2").val(),
                cols: [
                [
                    {field: 'id', title: 'ID', width: 100, sort: true}
                    , {field: 'tag', title: '接口名称', width:400, edit: 'text'}
                    , {field: 'method', title: '请求方式', width: 200, templet: "#method", edit: 'text'}
                    , {field: 'status', title: '编辑状态', width: 200, sort: true, templet: "#status"}
                    , {field: 'runStatus', title: '执行状态', width: 200, sort: true, templet: "#runStatus"}
                    , {field: 'name', title: '接口地址', width: 380, edit: 'text'}
                    ,{fixed: 'right', title: '操作栏', toolbar: '#barDemo', width: 100}
            ]
            ]
                ,page:true
                ,id:'singleListReload'
        });

        //模块下拉
        $.ajax({
            url: "/va/kindList/0",
            async: false,
            type: "get",
            success: function (data) {
                console.log(data);
                var kindlist = data.data;
                for (var i = 0; i < kindlist.length; i++) {
                    $("#kind").append("<option value='" + kindlist[i].kindId + "'>" + kindlist[i].kindName + "</option>")
                }
                $("#kind").val(0);
                form.render();//菜单渲染 把内容加载进去
            },
            error: function () {
                console.log("出错！");
            }
        });

        //分类下拉
        form.on('select(selectkind)', function (data) {
            $("#kind2").empty();
            $.ajax({
                url: '/va/dirList/' + $("#kind").val(),
                async: false,
                type: "get",
                success: function (data) {
                    var dirList = data.data;
                    for (var i = 0; i < dirList.length; i++) {
                        $("#kind2").append("<option value='" + dirList[i].kindDirId + "'>" + dirList[i].dirName + "</option>")
                    }
                    $("#kind2").val(0);
                    form.render();//菜单渲染 把内容加载进去
                }
            });
        });

        //监听工具条
        table.on('tool(singleListTable)', function(obj){
            if(obj.event === 'importCase'){
                let loader = layer.load();
                $.ajax({
                    url: "/va/importFlowCase?labelId="+$("#labelId").val()+"&caseId="+obj.data.id,
                    type: "get",
                    success: function (result) {
                        layer.close(loader);
                        layer.msg(result.msg);
                    }
                });
            }
        });

        //点击搜索后，重新加载表格数据
        $('#search_btn').on("click", function () {
            table.reload("singleListReload", {
                method:"get",
                url: '/va/singleCaseList?kind='+ $("#kind").val()+'&kind2='+ $("#kind2").val(),
                page:1
            })
        })


        $('#search .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

</script>

</body>
</html>

